<template>
  <view style="background: rgba(0, 0, 0, 0.5); max-height: 100%" v-if="card">
    <camera
      device-position="front"
      flash="off"
      @error="error"
      style="width: 100%; background: #fff"
      frame-size="large"
      class="camera"
	  resolution='medium'
    >
      <image
        src="https://cloudhouse.mynatapp.cc/anxinsu/app/common/20220301113346.jpg"
        class="scan-img"
      />
    </camera>
    <view class="foot">
      <!-- <view class="tip">正对摄像头，保证面部五官清晰</view>
      <view class="tip">正对光源保证面部明亮</view> -->
      <!-- <view class="tip">请正视摄像头!</view> -->
      <!-- <img src="/static/img/shib.png" alt @click="takePhoto" class="pai shib" /> -->
      <view class="tipbox" v-if="card">
        <view class="ntips">
          <image
            src="/static/yzbh/u1.png"
            mode=""
            style="height: 65rpx; width: 65rpx"
          ></image>
          <view class="ttext"> 请正对屏幕 </view>
        </view>
        <view class="ntips">
          <image
            src="/static/yzbh/u2.png"
            mode=""
            style="height: 65rpx; width: 65rpx"
          ></image>
          <view class="ttext"> 将人脸位于取景框中 </view>
        </view>
        <view class="ntips">
          <image
            src="/static/yzbh/u3.png"
            mode=""
            style="height: 65rpx; width: 65rpx"
          ></image>
          <view class="ttext"> 保持光线充足，直面光源 </view>
        </view>
      </view>

      <view class="padding flex flex-direction">
		  <button class="cu-btn blue margin-tb-sm lg" @click="takePhoto">
		  	{{card?"开始人脸识别":'开始'}}
		  </button>
      </view>

      <!-- <button
				class="pai"
				@click="takePhoto"
      >立即拍照</button>-->
    </view>
    <!-- 下面提示弹窗 -->
    <pop ref="popup" type="bottom">
      <view class="tishPop">
        <p class="title">预览</p>
        <view class="QRcodebox">
          <view style="width: 100%"
            ><image :src="shibieimg" mode="aspectFit" class="backborder"></image
          ></view>
          <p class="sbts">
            <icon type="cancel" size="26" style="float: left" />
            <span style="float: left">{{ sbts }}</span>
          </p>
          <p class="tit">请您根据提示重新拍摄</p>
          <div class="main">
            <p>·正对摄像头，保证面部五官清晰</p>
            <p>·正对光源保证面部明亮</p>
            <p>·稳定的光源环境</p>
          </div>
        </view>
        <view class="shibiebtn">
          <button class="cu-btn blue margin-tb-sm lg" @click="closePop">再次识别</button>
        </view>
      </view>
    </pop>
    <!-- <image src="/static/yzbh/cdl.png" mode="widthFix" class="cdl" /> -->
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import pop from "@/components/uni-popup/uni-popup.vue";

export default {
  components: {
    pop,
  },
  data() {
    return {
      sbts: "",
      shibieimg: "",
      src: "",
      item: {},
      card: "",
      whetherReplace: "",
	  t:''
    };
  },
  computed: {
    ...mapState({
      user: "user",
    }),
  },
  methods: {
    takePhoto() {
	console.log('我点击了')
      console.log(this.card);
	  try {
	  	const ctx = uni.createCameraContext();
	  	ctx.takePhoto({
	  	  quality: "high",
	  	  success: (res) => {
	  	    console.log("----base64----");
	  	    console.log(res.tempImagePath);
	  	    this.src = wx
	  	      .getFileSystemManager()
	  	      .readFileSync(res.tempImagePath, "base64");
	  	    this.facecheck();
	  	  },
	  			fail: (err) => {
	  			      uni.showToast({
	  			        title: JSON.stringify(err),
	  			        icon: 'none',
	  			        duration: 4000
	  			      })
	  			    }
	  	});
	  }catch(err){
	  	uni.showToast({
	  	  title: JSON.stringify(err),
	  	  icon: 'none',
	  	  duration: 4000
	  	})
	  }
      
    },
    error(e) {
      console.log(e.detail);
    },
    //打开识别未通过  弹窗
    opentsPop() {
      this.$refs.popup.open();
    },
    closePop() {
      this.$refs.popup.close();
    },

    facecheck() {
      uni.showLoading({
        title: "识别中",
        mask: true,
      });
      this.$http
        .post(
          "/app/facecheck",
          this.$qs.stringify({
            realName: this.card.username,
            idCard: this.card.card,
            photo: this.src,
            orderNumber: this.item.orderNumber,
            cardType: this.card.cardType,
            homeId: this.item.homeId,
            phoneNumber: this.user,
            whetherReplace: this.whetherReplace,
            addr: this.card.addr,
          }),
          {
            header: {},
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          console.log(res);
          let that = this;
          let data = res.data;
		  uni.hideLoading();
          if (data.code == 0) {
            uni.switchTab({
              url: "/pages/home/home",
            });
          } else if (data.code == 2) {
            this.sbts = data.data.errorMessage;
            /// 获取到base64Data
            var base64Data = data.data.faceBase64;
            /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
            base64Data = wx.arrayBufferToBase64(
              wx.base64ToArrayBuffer(base64Data)
            );
            /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
            const base64ImgUrl = "data:image/png;base64," + base64Data;
            this.shibieimg = base64ImgUrl;

            this.opentsPop();
          } else if (data.code == 301) {
            if (data.data.Dialog == 0) {
              uni.showModal({
                title: "提示",
                content: data.msg,
                success: function (res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                    that.whetherReplace = 1;
                    that.facecheck();
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                    that.whetherReplace = "";
                    // that.facecheck();
                  }
                },
              });
            }
          } else if (data.code == 1) {
            let that = this;
            // console.log(
            // 	"ws://yunchuang.natapp1.cc/websocket/whitelist/0/" +
            // 		this.item.homeInfo.hotelId
            // );
            // var socketTask = uni.connectSocket({
            //   url:
            //     "wss://jinyuhan.natapp4.cc/websocket/whitelist/0/" +
            //     this.item.homeInfo.hotelId,
            // }); //线下
            // var socketTask = uni.connectSocket({
            //   url:
            //     "wss://testimpl.mynatapp.cc/websocket/whitelist/0/" +
            //     this.item.homeInfo.hotelId,
            // });
            // var socketOpen = false;
            // uni.onSocketOpen(function (res) {
            //   console.log("WebSocket连接已打开！");
            //   socketOpen = true;
            //   console.log(
            //     `${that.item.hotelName}${that.item.homeInfo.homeNumber}，${
            //       that.card.username
            //     }审核失败，手机：${uni.getStorageSync("phone")}，请尽快处理`
            //   );
            //   uni.sendSocketMessage({
            //     data: `${that.item.hotelName}${
            //       that.item.homeInfo.homeNumber
            //     }，${that.card.username}审核失败，手机：${uni.getStorageSync(
            //       "phone"
            //     )}，请尽快处理`,
            //   });

            //   uni.showToast({
            //     icon: "none",
            //     title: data.msg,
            //     duration: 2000,
            //     mask: true,
            //   });
            //   setTimeout(function () {
            //     uni.switchTab({
            //       url: "/pages/home/home",
            //     });
            //   }, 2000);
            // });
            // if (socketOpen == false) {
            //   uni.sendSocketMessage({
            //     data: `${that.item.hotelName}${
            //       that.item.homeInfo.homeNumber
            //     }，${that.card.username}审核失败，手机：${uni.getStorageSync(
            //       "phone"
            //     )}，请尽快处理`,
            //   });

            //   uni.showToast({
            //     icon: "none",
            //     title: data.msg,
            //     duration: 2000,
            //     mask: true,
            //   });
            //   setTimeout(function () {
            //     uni.switchTab({
            //       url: "/pages/home/home",
            //     });
            //   }, 2000);
            // }
            uni.showToast({
              icon: "none",
              title: data.msg,
              duration: 3000,
              mask: true,
            });
          this.t=  setTimeout(function () {
              uni.switchTab({
                url: "/pages/home/home",
              });
            }, 3000);
          } else {
            uni.showToast({
              icon: "none",
              title: data.msg,
              duration: 3000,
              mask: true,
            });
         this.t=   setTimeout(function () {
              uni.switchTab({
                url: "/pages/home/home",
              });
            }, 3000);
          }
        })
    },
  },
  onLoad: function (options) {
    this.card = JSON.parse(options.user);

    this.item = uni.getStorageSync("orderList");
    console.log(this.item);
    console.log(this.card);
  },
};
</script>
<style>
page {
  background: white !important;
}
</style>
<style>
.sbts {
  text-align: center;
  font-size: 32upx;
  font-family: PingFang SC;
  color: #ff3333;
  padding: 40upx 0 60upx 0upx;
  overflow: hidden;
}
.scan-img {
  width: 750upx;
  height: 750upx;
  position: absolute;
  left: 0;
  top: 0;

  z-index: 1;
}

.pai {
  font-size: 15px;
  text-align: center;
  line-height: 60upx;
  color: white;
  position: absolute;
  bottom: 180rpx;
  left: 50%;
  width: 160px !important;
  margin-left: -80px;
  height: 160px;
}

.camera {
  position: relative;
  height: 750upx;
}

.foot {
  /* height: 50vh; */
  width: 100%;
  position: relative;
  /* background: rgba(0, 0, 0, 0.8); */
  background: white;
}

.footimg {
  height: 100%;
  width: 100%;
  display: block !important;
}
.tishPop {
  width: 100%;
  height: 95vh;
  background: #fff !important;
  position: absolute;
  left: 0upx;
  bottom: 0upx;
  z-index: 999;
}
.tishPop .title {
  font-size: 36upx;
  color: #0a0a0a;
  padding-top: 50upx;
  padding-bottom: 60upx;
  text-align: center;
}
.tishPop .QRcodebox {
  text-align: center;
  padding: 0upx 60upx;
}
.tishPop .QRcodebox .backborder {
  width: 100%;
  height: 280upx;
  border-radius: 8upx;
}
.tishPop .QRcodebox .tit {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  padding-bottom: 40upx;
  text-align: center;
}
.tishPop .QRcodebox .main {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #797979;
  padding-left: 54upx;
  text-align: left;
  padding-bottom: 70upx;
}
.shibiebtn button {
  width: 655upx;
  height: 88upx;
  line-height: 88upx;
  background: #4e6dd2;
  border-radius: 44upx;
  font-size: 28upx;
  color: #fff;
  margin: auto;
}
.shibiebtn{
	display: flex;
	justify-content: center;
}
.tip {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff3333;
  text-align: center;
  margin-bottom: 10px;
}
.btn {
  background: #4382FF;
  width: 100%;
  color: white;
  border-radius: 40px 40px;
}
.ntips {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}
.ttext {
  margin-left: 20px;
}
.tipbox {
  margin-left: 80rpx;
  padding-top: 20rpx;
}
.cdl {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}
.blue {
		background: #4382ff !important;
		color: white;
		z-index: 99;
	}
</style>
